<template>
  <div class="fun-lists">
    <div ref="funList">
      <q-infinite-scroll :handler="loadMore" ref="infiniteScroll">
        <ul>
          <li class="fun-item" v-for="item in funList" v-bind:key="item.id" @click="selectedItemFun(item, $event)">
            <div class="fun-lable-pic">
              <img v-lazy="item.imgurl" class="fun-title-pic"/>
              <ul class="fun-lable-lists" v-if="item.labels && item.labels.length>0">
                <li class="fun-lable-item" v-for="label in item.labels">{{label}}</li>
              </ul>
            </div>
            <h1 class="fun-item-title">{{item.title}}</h1>
            <div class="fun-item-content">
              <p class="desc">{{item.desc}}</p>
              <div class="price">
                <div class="price-left">
                  ￥<span class="price-num">{{item.price}}</span>/人起
                </div>
                <div class="price-right">
                  <span>出发地：{{item.in}}</span>
                  <span>到达地点：{{item.out}}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <spinner slot="message" name="dots" :size="40"></spinner>
      </q-infinite-scroll>
    </div>
    <div>
      <!-- <q-drawer right-side ref="leftDrawer">
         <v-detail :jounery="selectedItem"></v-detail>
       </q-drawer>-->
      <v-loading :showLoading="showLoading"></v-loading>
    </div>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  // import Detail from './detail'
  import Loading from '../loading/index'
  export default({
    data () {
      return {
        funList: [],
        selectedItem: {},
        showLoading: false
      }
    },
    created () {
    },
    methods: {
      loadMore: function (index, done) {
        this.showLoading = true
        let result = HttpRequest(linklist.jouneryUrl)
        result.then((response) => {
          this.showLoading = false
          if (response.status === 200) {
            let lists = response.body
            if (lists && lists.length > 0 && index < 5) {
              console.log('index', index)
              this.funList = this.funList.concat(lists)
              done()
            }
            else {
              done()
              this.$refs.infiniteScroll.stop()
            }
          }
        }, (response) => {
          this.showLoading = false
        }).catch((response) => {
          this.showLoading = false
        })
      },
      selectedItemFun (item, event) {
        // this.$refs.leftDrawer.open()
        this.selectedItem = item
        this.$router.push({name: 'jouneryDetail', params: {id: item.id}})
      }
    },
    components: {
      // 'v-detail': Detail,
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "./index.styl"
</style>
